<template>
	<view>
		<view v-if="housingList.length">
			<view v-for="item in housingList" :key='this'>
				<view class="dis-flex mt-20" @click='jumpDetails(item.housingId)'>
					<!-- 图片 -->
					<view width="240rpx" height="240rpx">
						<img v-lazy="imgUrl(item.files)" class='housimg'>
						<!-- <u-image width="240rpx" height="240rpx" border-radius="25rpx" ></u-image> -->
					</view>
					<view class="f-30 ml-10 flex-box">
						<view class="f-40  dis-flex">
							<view class="name flex-box">
								{{item.title}}
							</view>
						</view>
						<!-- 特色标签 -->
						<view class="tabAll">
							<scroll-view scroll-x="true" class="renwu-title-items">
								<text class="u-n-tag" v-for="tag in item.characteristic" :key='this'>
									{{tag}}
								</text>
							</scroll-view>
						</view>
						<view class="dis-flex">
							<view class="">
								<text>{{item.area}}</text>
								<text>m²</text>
							</view>
							<view v-if="item.layout"> / {{item.layout}}</view>
							<view v-if="item.orientation">/{{item.orientation}}</view>

						</view>
						<view>{{item.address}}</view>
						<view class="dis-flex">
							<view class="col-m new_price" v-if="item.price">
								<text class="f-40">{{item.price}}</text>
								<text>元/月</text>
							</view>
							<view class="operation" v-if="item.shelf == 0">
								<u-button type="success" plain shape="square" size="mini" @click='shelvesHous(item.housingId)'>上架</u-button>
							</view>
						</view>


					</view>
				</view>
			</view>
		</view>
		<view class="dis-flex flex-x-center flex-y-center f-24 col-9" v-else>暂无房源信息</view>
		<!-- 消息提示 -->
		<u-toast ref="uToast" />

	</view>
</template>

<script>
	export default {
		props: {
			housingList: {
				type: Array,
				default: function() {
					return []
				}
			}
		},
		data() {
			return {

			};
		},
		methods: {
			// 跳转到房源详情
			jumpDetails(id) {
				this.$u.route('/pages/listingDetails/index', {
					id: id,
				});
			},
			// 上架
			shelvesHous(id) {
				let _this = this;
				uni.showModal({
					title: '提示',
					content: '确定上架',
					success: function(res) {
						if (res.confirm) {
							_this.$u.api.shelves(`${localStorage.getItem('userId')}/${id}`).then(res => {
								_this.$refs.uToast.show({
									title: "操作成功",
									type: 'success',
								})
								_this.$emit('getShelData')
							})
						} else if (res.cancel) {}
					}
				});

			},
			imgUrl(val){
				let img = [];
				val.forEach(ele=>{
					if(ele.fileType == 0){
						img.push(ele.url)
					}
				})
				let url = img.length > 0?img[0]:'';
				return url
			}
		},
		// 页面滚动到底部的事件
		onReachBottom() {}
	}
</script>

<style scoped>
	.u-n-tag {
		background-color: #f3f4f9;
		font-size: 13px;
		color: #8994b8;
		padding: 0 10rpx;
		margin-right: 20rpx;
		border-radius: 15rpx;
		display: inline-block;
		height: 48rpx;
		line-height: 48rpx;
	}

	.dot {
		display: inline-block;
		width: 10rpx;
		height: 10rpx;
		background: black;
		border-radius: 50%;
		margin: 0 10rpx;
		box-sizing: border-box;

	}

	.tabAll {
		margin-top: 10rpx;
	}

	.name {
		font-size: 35rpx;
		font-weight: bold;
		flex: 0 0 400rpx;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	.new_price {
		flex: 0 0 350rpx;
		color: #ef4f52;
		font-weight: bold;
	}

	.renwu-title-items {
		width: 460rpx;
		height: 50rpx;
		white-space: nowrap;
	}

	.ml-10 {
		margin-left: 20rpx;
	}

	.mt-20 {
		margin-top: 20rpx;
	}

	.operation {
		float: right;
		margin-right: 30rpx;
	}

	.housimg {
		width: 240rpx;
		height: 240rpx;
		border-radius: 25rpx;
	}
</style>
